<script setup>
import api from '../api/manager_api.js'
import { ref, onMounted } from 'vue';
import { ElIcon, ElTag, ElPopover, ElButton, ElTable, ElTableColumn, ElMessageBox, ElMessage } from 'element-plus';
import { Timer } from '@element-plus/icons-vue'; // 引入用到的图标
import lodash from 'lodash'


// 定义绑定的数据
// 表格中的数据
const tableData = ref([]); // 表格数据
const total = ref(0); // 总记录数
// 编辑弹窗可见性
const editWinVisible = ref(false);
// 新增弹窗可见性
const addWinVisible = ref(false);
// 查询的数据
const searchObj = ref({ // 查询条件
  current: 1,
  limit: 10,
  manager_id: '',
  manager_name: '',
  phone: '',
  work_date: '',
  log_code: '',
})
// 编辑表单数据
const editObj = ref({
});
// 新增表单数据
const addObj = ref({// 新增表单数据
  manager_id: '',
  manager_name: '',
  phone: '',
  work_date: '',
  log_code: '',
});

// 获取表格数据
const search = async () => {
  const result = await api.page(searchObj.value);
  tableData.value = result.data;
  total.value = result.count;
}

// 页面加载后初始化数据
onMounted(async () => {
  search();
})

//自定义方法

// 分页
const handleSizeChange=()=>{
  console.log(searchObj);
  search();
}
// 当前页码
const handleCurrentChange=()=>{
  console.log(searchObj);
  search();
}

// 执行查询
const handlerSearch = () => {
  searchObj.value.current = 1;
  search();
  console.log(searchObj);
}

// 编辑弹窗取消
const editCancel = () => {
  editObj.value = {};
  editWinVisible.value = false;
}

// 编辑提交
const editCommit = async () => {
  await api.edit(editObj.value);
  search();
  editWinVisible.value = false;
  ElMessage.success('修改成功');
}

// 编辑操作
const handleEdit = (index, row) => {
  editObj.value = lodash.clone(row); // 克隆行数据到编辑表单
  editWinVisible.value = true;
}

// 删除操作
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定要删除该行数据吗?',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(async () => {
        await api.del(row.number);// 删除数据
        search();// 重新查询
        ElMessage.success('删除成功');// 提示信息
      })
      .catch(() => {// 取消删除
        ElMessage.info('已取消删除');// 提示信息
      })
}

// 打开新增弹窗
const openAddDialog = () => {
  addObj.value = {}; // 清空新增表单
  addWinVisible.value = true;
}

// 新增提交
const addCommit = async () => {
  ElMessageBox.confirm(
      '确定要提交吗?',
      '提交提示',
      {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'info',
      }
  )
      .then(async () => {
        await api.add(addObj.value); // 提交新增表单数据
        addWinVisible.value = false;
        search();
        ElMessage.success('新增成功');
      })
      .catch(() => {
        ElMessage.info('已取消提交');
      })
};
</script>

<template>
  <!--   查询表单-->
  <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 10px">
    <el-form-item label="管理员编号">
      <el-input v-model="searchObj.manager_id" placeholder="请输入管理员编号"></el-input>
    </el-form-item>
    <el-form-item label="管理员姓名">
      <el-input v-model="searchObj.manager_name" placeholder="请输入管理员姓名"></el-input>
    </el-form-item>
<!--    <el-form-item label="管理员电话">-->
<!--      <el-input v-model="searchObj.phone" placeholder="请输入管理员电话"></el-input>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="管理员入职日期">-->
<!--      <el-date-picker-->
<!--          v-model="searchObj.work_date"-->
<!--          type="date"-->
<!--          placeholder="请输入管理员入职时间"-->
<!--          value-format="YYYY-MM-DD"-->
<!--          clearable-->
<!--      />-->
<!--    </el-form-item>-->
<!--    <el-form-item label="管理员密码">-->
<!--      <el-input v-model="searchObj.log_code" placeholder="请输入管理员密码"></el-input>-->
<!--    </el-form-item>-->
    <el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="openAddDialog">新增</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" style="width: 100%" border>

    <!-- 管理员编号列 -->
    <el-table-column label="管理员编号" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.manager_id }}</span>
        </div>
      </template>
    </el-table-column>
    <!-- 管理员姓名列 -->
    <el-table-column label="管理员姓名" width="120">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="200">
          <template #default>
            <div>name: {{ scope.row.manager_name}}</div>
            <div>名称</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.manager_name }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <!-- 电话列 -->
    <el-table-column label="电话" width="120">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="200">
          <template #default>
            <div>pet_id: {{ scope.row.phone }}</div>
            <div>电话</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.phone }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <!-- 入职日期列 -->
    <el-table-column label="入职日期" width="120">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="200">
          <template #default>
            <div>user_id: {{ scope.row.work_date }}</div>
            <div>入职日期</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.work_date}}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
<!--    &lt;!&ndash; 管理员密码列 &ndash;&gt;-->
<!--    <el-table-column label="管理员密码" width="120">-->
<!--      <template #default="scope">-->
<!--        <el-popover effect="light" trigger="hover" placement="top" width="200">-->
<!--          <template #default>-->
<!--            <div>密码: {{ scope.row.log_code }}</div>-->
<!--            <div>管理员密码</div>-->
<!--          </template>-->
<!--          <template #reference>-->
<!--            <el-tag>{{ scope.row.log_code }}</el-tag>-->
<!--          </template>-->
<!--        </el-popover>-->
<!--      </template>-->
<!--    </el-table-column>-->
    <!-- 操作列 -->
    <el-table-column label="按钮" width="120">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          修改
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页-->
  <el-pagination
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[1,5,10,20,30,50]"
      :background="background"
      layout="total,sizes, prev, pager, next,jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

  <!-- 编辑对话框（独立） -->
  <el-dialog v-model="editWinVisible" title="编辑" width="500">
    <el-form :model="editObj">
      <el-form-item label="管理员姓名" :label-width="100">
        <el-input v-model="editObj.manager_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="管理员编号" :label-width="100">
        <el-input v-model="editObj.manager_id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话" :label-width="100">
        <el-input v-model="editObj.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="入职日期" :label-width="100">
        <el-date-picker
            v-model="editObj.work_date"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="密码" :label-width="100">
        <el-input v-model="editObj.log_code" autocomplete="off" />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 新增对话框（独立） -->
  <el-dialog v-model="addWinVisible" title="新增管理员信息" width="500">
    <el-form :model="addObj" label-width="100px">
      <el-form-item label="管理员编号">
        <el-input v-model="addObj.manager_id" placeholder="请输入管理员编号" />
      </el-form-item>
      <el-form-item label="管理员姓名">
        <el-input v-model="addObj.manager_name" placeholder="请输入管理员的姓名" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="addObj.phone" placeholder="请输入电话" />
      </el-form-item>
      <el-form-item label="入职时间">
        <el-date-picker
            v-model="addObj.work_date"
            type="date"
            placeholder="选择领养日期"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="管理员密码">
        <el-input v-model="addObj.log_code" placeholder="请输入管理员密码" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addWinVisible = false">取消</el-button>
        <el-button type="primary" @click="addCommit">提交新增</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-table {
  --el-table-header-text-color: #333;
  --el-table-row-hover-bg-color: #f5f7fa;
  margin-top: 10px;
}
</style>

































